localstorage作業練習

localstorage章節最後的練習，就是做一個代辦事項，主要是訓練:

• localstorage新增及刪除修改
• json轉字串及轉array
• 撈資料及重新更新資料到網頁上
  作業練習範例

1. html部分，針對JS會作用的部分說明，其他沿用作業範例排版

I. 新增 div.addList 裡面有一個 .text 文字輸入框，一個 .send 按鈕，用來新增文字紀錄
II. 再新增一個空的 ul.list，裡頭的 li 會藉著事件互動新增上去

<div class="addList">
  <input type="text" class="text"  placeholder="請填寫訓練內容" required >
  <input type="button" class="send" value="加入訓練">
</div>
<ul class="list"></ul>

2. JS部分，主要分成:

• 指定 DOM
• 監聽與更新
• 加入列表、同步更新網頁及localstorage
• 更新網頁內容
• 刪除訓練事項

3. 指定 DOM :

I. 宣告 list 指定 ul.list
II. 宣告 sendData 指定 .send 按鈕
III. 宣告 data 用 JSON.parse 將瀏覽器資料庫撈出來的 sring 轉為 array，再加入 ||，若瀏覽器資料庫沒有內容資料就變成 [] 空陣列

  var list = document.querySelector('.list');
  var sendData = document.querySelector('.send');
  var data = JSON.parse(localStorage.getItem('listData')) || [];

4. 監聽與更新

I. 監聽 sendData 按鈕事件觸發 addData函式(加入列表並同步更新)
II. 監聽 list 按鈕事件觸發 toggleDone函式(刪除訓練事項)
III. 將 data 內容帶入並執行 updateList 函式

  sendData.addEventListener('click', addData);
  list.addEventListener('click', toggleDone);
  updateList(data);

5. 加入列表、同步更新網頁及localstorage

I. 命名 addData 函式
II. 先 preventDefault 取消瀏覽器的預設行為
III. 宣告 txt 指定 html的文字輸入框 text 裡的 value
IV. 宣告 todo 儲存 training : txt 的內容
V. 把 todo 新增到 data 的 array
VI. 將更新過的 data 內容帶入並執行 updateList 函式
VII. 儲存在瀏覽器資料庫，命名 listData 屬性，用JSON.stringify將 data 的陣列資料字串化存入

  function addData(e) {
    e.preventDefault();
    var txt = document.querySelector('.text').value;
    var todo = {
      training : txt
    };
    data.push(todo);
    updateList(data);
    localStorage.setItem('listData', JSON.stringify(data));
  }

6. 更新網頁內容

I. 命名 addData 函式
II. 先 preventDefault 取消瀏覽器的預設行為
III. 宣告 txt 指定 html的文字輸入框 text 裡的 value
IV. 宣告 todo 儲存 training : txt 的內容
V. 把 todo 新增到 data 的 array
VI. 將更新過的 data 內容帶入並執行 updateList 函式，更新網頁

  function updateList(items) {
    str = '';
    var len = items.length;
    for (var i = 0; len > i; i++) {
      str += '<li><a href="#" data-index=' + i + ' />刪除</a> <span>' + items[i].content + '</span></li>';
    }
    list.innerHTML = str;
  }

7. 刪除訓練事項

I. 命名 toggleDone 函式
II. 先 preventDefault 取消瀏覽器的預設行為
III. 使用 IF判斷if(e.target.nodeName !== 'A'){return} 假如點擊的不是 a 標籤，就用 return 來去中斷，不讓程式繼續讀下去
IV. 宣告 index 指定 dataset.index 抓取編號
V. 用 splice 刪除 array 裡剛抓的 index編號後刪除第一筆，也就是本身
VI. 重新儲存在瀏覽器資料庫，用JSON.stringify將 data 的陣列資料字串化存入
VII. 將更新過的 data 內容帶入並執行 updateList 函式，更新網頁

  function toggleDone(e) {
    e.preventDefault();
    if(e.target.nodeName !== 'A'){return};
    var index = e.target.dataset.index;
    data.splice(index, 1);
    localStorage.setItem('listData', JSON.stringify(data));
    updateList(data);
  }